<template>
    <div class="wh-100% flex">
        <n-card class="w-70% min-w-800px" content-class="flex overflow-hidden">
            <template #header>
                <div
                    class="w-full flex justify-between pb-4"
                    style="border-bottom: solid 1px #e5e5e5"
                >
                    <span>模型介绍</span>
                    <div class="flex gap-2.5">
                        <n-button
                            v-if="!editing"
                            secondary
                            :focusable="false"
                            @click="handleRefresh"
                        >
                            <template #icon>
                                <ReloadCircle />
                            </template>
                            刷新
                        </n-button>
                        <n-button
                            v-if="!editing"
                            secondary
                            :focusable="false"
                            @click="handleEditContent"
                        >
                            <template #icon>
                                <Create />
                            </template>
                            编辑
                        </n-button>
                        <div v-else class="flex gap-2.5">
                            <n-button
                                secondary
                                :focusable="false"
                                @click="
                                    {
                                        editing = false;
                                        editorRef?.disableEditor();
                                    }
                                "
                            >
                                <template #icon>
                                    <ArrowUndoCircle />
                                </template>
                                取消
                            </n-button>
                            <n-button
                                :focusable="false"
                                @click="handleSaveContent"
                                secondary
                                type="info"
                            >
                                <template #icon>
                                    <CheckmarkCircle />
                                </template>
                                保存
                            </n-button>
                        </div>
                    </div>
                </div>
            </template>
            <WangEditor ref="editorRef" class="h-full" />
        </n-card>
        <div class="w-30% box-border p-20px flex-center min-w-375px">
            <div
                class="bg-#ffffff flex flex-col w-94 h-200 pb-6 shadow rounded-xl box-border overflow-hidden"
            >
                <div
                    class="w-full box-border p-4 flex-center font-bold font-size-20px"
                >
                    模型介绍
                </div>
                <div class="flex-1 box-border px-4 overflow-scroll">
                    <div v-html="modelEntry?.content"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Entry } from "@/types/intro";

import {
    ReloadCircle,
    Create,
    CheckmarkCircle,
    ArrowUndoCircle,
} from "@vicons/ionicons5";

import { getStore } from "@/store";
import { getEntries, updateEntry } from "@/service/api/entry";
import WangEditor from "../components/wang-editor/index.vue";

const editorRef = ref<InstanceType<typeof WangEditor> | null>(null);

const editing = ref(false);

const entryStore = getStore("entry");
const modelEntry = ref<Entry>({
    id: "",
    title: "模型介绍",
    rank: 0,
    content: "",
    createTime: 0,
});

const handleQueryEntry = async () => {
    try {
        await getEntries();
    } catch (err) {
        window.NMessage.error((err as Error).message);
    }
};

onMounted(async () => {
    if (!entryStore.getEntryLoaded) {
        await handleQueryEntry();
    }
    modelEntry.value = entryStore.getEntryByTitle("模型介绍");
});

const handleEditContent = () => {
    editing.value = true;
    editorRef.value?.enableEditor(modelEntry.value.content);
};

const handleSaveContent = async () => {
    try {
        const content = await editorRef.value?.handleSave(
            modelEntry.value.content
        );
        if (content) {
            await updateEntry("模型介绍", content);
            modelEntry.value.content = content;
            editing.value = false;
            window.NMessage.success("修改成功");
        }
    } catch (err) {
        window.NMessage.warning((err as Error).message);
    }
};

const handleRefresh = async () => {
    await getEntries();
    modelEntry.value = entryStore.getEntryByTitle("模型介绍");
};
</script>

<style>
.html-content code,
.html-content pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
}
</style>
